<%--
  Created by IntelliJ IDEA.
  User: 陈海彬
  Date: 2023/9/25
  Time: 19:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>出库信息</title>
    <link rel="stylesheet" href="../../static/css/element-ui.css">
    <script src="../../static/js/vue.js"></script>
    <script src="../../static/js/axios.min.js"></script>
    <script src="../../static/js/element_index.js"></script>
</head>
<body>
<div id="app">
    <%--表格组件--%>
    <el-form :inline="true" :model="searchForm">
        <el-form-item label="分店信息">
            <el-select v-model="searchForm.branchid" placeholder="请选择要查询的分店">
                <el-option v-for="item in branchInfoList" :key="item.branchid" :label="item.branchname"
                           :value="item.branchid"></el-option>
            </el-select>
        </el-form-item>
        <el-form-item>
            <el-button type="success" @click="initOutLibrayInfo(1)" icon="el-icon-search">查询</el-button>
        </el-form-item>
    </el-form>

    <el-button @click="refresh" type="success" icon="el-icon-refresh">刷新</el-button>
    <el-table
            :data="warehouseInfo"
            :cell-style="{'text-align':'center'}"
            :header-cell-style="{'text-align':'center'}"
            style="width: 100%">
        <el-table-column
                fixed
                width="100"
                show-overflow-tooltip
                prop="outLibray.cid"
                label="出库编号">
        </el-table-column>
        <el-table-column
                prop="outstaffName"
                show-overflow-tooltip
                label="出库人">
        </el-table-column>
        <el-table-column
                prop="outLibray.outtime"
                show-overflow-tooltip
                label="出库时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="examstaffName"
                show-overflow-tooltip
                label="审核人">
        </el-table-column>
        <el-table-column
                prop="outLibray.examtime"
                show-overflow-tooltip
                label="审核时间"
                width="180">
        </el-table-column>
        <el-table-column
                prop="outLibray.outmethod"
                show-overflow-tooltip
                label="出库方式"
                width="90">
            <template slot-scope="scope">
                <el-tag
                        hit
                        :type="scope.row.outLibray.outmethod==1?'success':scope.row.outLibray.outmethod==2?'':'warning'"
                        effect="dark">
                    {{ scope.row.outLibray.outmethod==1?'零售出库':scope.row.outLibray.outmethod==2?'批量出库':'平掉出库'
                    }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="outLibray.examstate"
                label="出库状态"
                width="90">
            <template slot-scope="scope">
                <el-tag
                        hit
                        :type="scope.row.outLibray.examstate==1?'warning':scope.row.outLibray.examstate==2?'success':'danger'"
                        effect="dark">
                    {{ scope.row.outLibray.examstate==1?'待审核':scope.row.outLibray.examstate==2?'审核通过':'审核驳回'
                    }}
                </el-tag>
            </template>
        </el-table-column>
        <el-table-column
                prop="branch.branchname"
                show-overflow-tooltip
                label="所属分店"
                width="140">
        </el-table-column>
        <el-table-column
                prop="outLibray.remarks"
                show-overflow-tooltip
                label="驳回理由"
                width="130">
        </el-table-column>
        <el-table-column
                fixed="right"
                label="操作"
                width="140">
            <template slot-scope="scope">
                <el-button @click="getOutInfoByCid(scope.row.cid)" size="medium" type="primary">详细信息</el-button>
            </template>
        </el-table-column>
    </el-table>
    <%--分页组件--%>
    <el-pagination
            @size-change="warehouseSizeChange"
            @current-change="warehouseCurrentChange"
            :current-page="warehousePage"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="warehousePageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="warehouseTotal">
    </el-pagination>

    <%--详细信息弹出层--%>
    <el-dialog
            title="出库详情"
            :visible.sync="detailsVisible"
            width="80%">
        <el-table
                :cell-style="{'text-align':'center'}"
                :header-cell-style="{'text-align':'center'}"
                :data="detailsInfo"
                stripe
                style="width: 100%">
            <el-table-column prop="xid" label="出库详情ID"></el-table-column>
            <el-table-column prop="goods.goodsname" label="商品名"></el-table-column>
            <el-table-column prop="num" label="出库数量"></el-table-column>
            <el-table-column prop="goods.cprice" label="售价"></el-table-column>
            <el-table-column prop="total" label="总价"></el-table-column>
        </el-table>
        <el-pagination
                @size-change="detailsSizeChange"
                @current-change="detailsCurrentChange"
                :current-page="detailsPage"
                :page-sizes="[5, 10, 15, 20]"
                :page-size="detailsPageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="detailsTotal">
        </el-pagination>
        <span slot="footer" class="dialog-footer">
  </span>
    </el-dialog>
</div>
<script>
    let app = new Vue({
        el: "#app",
        data: {
            warehouseInfo: [],//出库审核的数据
            warehousePage: 1,//出库审核的页码
            warehousePageSize: 5,//出库审核每页最大数
            warehouseTotal: 0,//出库审核的条数

            /*出库详细信息数据*/
            detailsInfo: [],//出库详情信息数据
            detailsPage: 1,//出库详情的页码
            detailsPageSize: 5, //每页最大数
            detailsTotal: 0,//总条数
            detailsVisible: false,//出库详情对话框
            detailsCid: undefined,//选择的cid

            /*下拉框数据*/
            searchForm: {
                /*分店id*/
                branchid: undefined
            },//下拉选择框
            branchInfoList: [],//下列选择框数据
        },
        created() {
            /*初始化出库审核的数据*/
            this.initOutLibrayInfo();
            /*初始化下拉框数据*/
            this.initBranchInfo();
        },
        methods: {
            /*获取出库审核的数据*/
            initOutLibrayInfo(val) {
                if (val === 1) {
                    this.warehousePage = 1;
                }
                axios.get('/outLibray/getWarehouseInfo', {
                    params: {
                        page: this.warehousePage,
                        pageSize: this.warehousePageSize,
                        branchid: this.searchForm.branchid
                    }
                }).then(res => {
                    this.warehouseInfo = res.data.data.rows;
                    this.warehouseTotal = res.data.data.total;
                    console.log(this.warehouseInfo)
                })
            },
            /*获取下拉框数据*/
            initBranchInfo() {
                let self = this;
                axios.get('/branch/list').then(res => {
                    self.branchInfoList = res.data.data;
                })
            },
            /*修改出库审核每页最大数*/
            warehouseSizeChange(val) {
                this.warehousePageSize = val;
                this.initOutLibrayInfo();
            },
            /*修改出库审核当前页码*/
            warehouseCurrentChange(val) {
                this.warehousePage = val;
                this.initOutLibrayInfo();
            },
            /*获取出库详细信息*/
            initDetailsInfo(cid) {
                axios.get('/outLibray/getOutInfoByCid', {
                    params: {
                        cid: cid,
                        page: this.detailsPage,
                        pageSize: this.detailsPageSize
                    }
                }).then(res => {
                    this.detailsInfo = res.data.data.rows;
                    this.detailsTotal = res.data.data.total;
                })
            },
            getOutInfoByCid(cid) {
                //打开对话框
                this.detailsVisible = true;
                this.initDetailsInfo(cid);
                this.detailsCid = cid;
            },
            /*出库详情修改展示数量*/
            detailsSizeChange(val) {
                this.detailsPageSize = val;
                this.initDetailsInfo(this.detailsCid);
            },
            /*出库详情修改当前页*/
            detailsCurrentChange(val) {
                this.detailsPage = val;
                this.initDetailsInfo(this.detailsCid);
            },
            /*页面刷新*/
            refresh() {
                this.warehousePage = 1;
                this.warehousePageSize = 5;
                this.initOutLibrayInfo();
            }
        }
    })
</script>
</body>
</html>
